<template>
  <div id="main" class="parameterInfor flowCloumn h100">
    <div class="constentBttom flowWrap tab-switch h100">
      <div class="treeDiv class-tree">
        <edit-tree
          ref="tree"
          :treeSetting="treeSetting"
          :hideBtn="hideBtn"
          :haveRemark="false"
          :draggable="draggable"
          type="normal"
          @handleClickTree="handleClickTree"
          @dropNode="dropNode"
          :filterNode="filterNode"
        />
      </div>
      <div class="draggingBtn">
        <widthResize></widthResize>
      </div>
      <div class="constentmain tableDiv detail-content">
        <detailShow
          :treeNodeId="treeNodeId"
          :treeNodeName="treeNodeName"
          @add="addNode"
          @save="changeTree"
          @delete="deleteNode"
          @moveNode="moveNode"
          @caleMoveNode="caleMoveNode"
        />
      </div>
    </div>
  </div>
</template>

<script>
import {
  classStandardTree,
  classStandardTreeDrag,
} from "@/api/standardManagement/acountManagement.js";
import detailShow from "./detailShow.vue";
export default {
  name: "classStandard",
  components: {
    detailShow,
  },
  data() {
    return {
      //haveRelated:true,
      treeSetting: {
        title: "",
        data: [],
        defaultProps: {
          children: "children",
          label: "name",
        },
      },
      hideBtn: true,
      treeNode: null,
      draggable: false,
      treeNodeId: "",
      treeNodeName: "",
      orginData: [],
    };
  },
  created() {
    this.getTreeData();
  },
  methods: {
    //筛选树
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    //点击树节点
    handleClickTree(node) {
      this.treeNode = node;
      this.treeNodeId = node.id;
      this.treeNodeName = node.name;
    },
    //修改数
    changeTree() {
      this.getTreeData();
    },
    addNode(id) {
      this.treeNodeId = id;
      this.getTreeData();
    },
    deleteNode(id) {
      this.getTreeData();
      this.treeNodeId = "";
    },
    //设置节点可拖拽
    moveNode(val) {
      this.draggable = val;
    },
    //设置节点不可移动
    caleMoveNode(val) {
      this.draggable = val;
    },
    dropNode(data) {
      this.$confirm("确定要拖动这条数据吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          classStandardTreeDrag(data).then((res) => {
            if (res.code == 200) {
              this.$message.success("修改成功");
              this.getTreeData();
            }
          });
        })
        .catch(() => {
          let treeData = JSON.parse(JSON.stringify(this.orginData));
          this.$refs.tree.setData(treeData);
        });
    },
    //获取分类标准数据
    getTreeData() {
      classStandardTree().then(
        (res) => {
          if (res.code == 200 && res.data.length > 0) {
            if (this.treeNodeId == "") {
              this.treeNodeId = res.data[0].id;
            }
            this.orginData = JSON.parse(JSON.stringify(res.data));
            this.$set(this.treeSetting, "data", res.data);
            this.$refs.tree.setCurrentKey(this.treeNodeId);
          }
        },
        (error) => {
          this.$message.error(error);
        }
      );
    },
  },
};
</script>

<style lang="less" scoped>
#main {
  // width: 100%;
  // height: 100%;
  // background-color: white;
  // display: flex;
  // flex-flow: wrap nowrap;
  .class-tree {
    height: 100%;
    //min-width:200px;
    width: 300px;
    border-right: 10px solid #f2f3f8;
    //overflow: scroll;
  }
  .detail-content {
    height: 100%;
    width: calc(100% - 300px);
    //border-left: 10px solid #f2f3f8;
    flex: 1;
    padding: 20px;
    overflow: auto;
  }
}
.parameterInfor {
  .constentmain {
    margin-left: 15px;
  }
  /deep/.el-tabs__content {
    height: calc(100% - 50px);
  }
  /deep/.el-tab-pane {
    height: 100%;
  }
}
.flowCloumn {
  display: flex;
  flex-flow: column nowrap;
}
.flowWrap {
  display: flex;
  flex-flow: wrap nowrap;
}
.el-tabs--border-card {
  box-shadow: none;
}
</style>
